/** @jsxImportSource @emotion/react */
import * as React from "react";
import {BlobInputList, Input, InputLine, SuffixInput, Text, TextArea,} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, useItemInputControl} from "../../common/base";
import {MeasureCritMemProps, useMeasureItem, useMeasureRow} from "../../hook/useMeasure";
import {useMeasureInpFilter} from "../../common/hooks";

/**测量 很通用的 自带编辑器地；
 * 可备注录入。
 *假如采用定义const defaultV = (par: any) => { };注入的，不友好。不能立刻同步更新啊。只能在本组件内部做变更，无法外部配置的形式注入。
 * */
export const MeasureCritMemDyn =
    React.forwardRef((
        {
            children, show, alone = true, refWidth, label,
            config, iAname, allowableV = false, defaultSave = false, mem,
        }: MeasureCritMemProps, ref
    ) => {
        const {inp, setInp} = useItemInputControl({ref});
        const newconfig = React.useMemo(() => {
            return (typeof config === 'function' ? config(inp) : config);
        }, [ config]);
        const {itemObservation, itemObservationA,} = useMeasureItem(newconfig, allowableV);
        const {render} = useMeasureRow(inp, setInp, newconfig, allowableV, defaultSave);
        const itemA备注: string[] = mem ? [`${mem}`] : [];
        const itemA = React.useMemo(() => {
            return [...itemObservationA, ...itemA备注, ...iAname ?? []];
        }, [itemObservationA, iAname]);
        const [getInpFilter] = useMeasureInpFilter(itemObservation, itemA, );
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label}>
                <Text variant="h5">{label}：</Text>
                {render}
                {mem && <>
                    <hr/>
                    备注：
                    <TextArea value={inp?.[mem] || ''} rows={5}
                              onChange={e => setInp({...inp, [mem]: e.currentTarget.value || undefined})}/>
                </>
                }
                {children}
            </InspectRecordLayout>
    );
});

/**特殊需要 附加 录入数据：
 * 底下的 render.slice(0, 16) 关联耦合到配置项的，配置顺序。
* */
export const Measure2Stability =
    React.forwardRef((
        {
            children, show, alone = true, refWidth, label,
            config,iAname, allowableV = false, defaultSave = false, mem,
        }: MeasureCritMemProps, ref
    ) => {
        const {inp, setInp} = useItemInputControl({ref});
        const configToItem = React.useMemo(() => {
            return (typeof config === 'function' ? config(inp) : config);
            //不能加依赖项 inp  inp?.倾斜度要
        }, [config]);
        const newconfig = React.useMemo(() => {
            return (typeof config === 'function' ? config(inp) : config);
            //@这里  附加依赖项@  ‘倾斜度要’
        }, [inp?.倾斜度要, config]);
        const {itemObservation, itemObservationA,} = useMeasureItem(configToItem, allowableV);
        const {render} = useMeasureRow(inp, setInp, newconfig, allowableV, defaultSave);
        const itemA备注: string[] = mem ? [`${mem}`] : [];
        const itemA = React.useMemo(() => {
            return [...itemObservationA, ...itemA备注, ...iAname ?? []];
        }, [itemObservationA, iAname]);
        const [getInpFilter] = useMeasureInpFilter(itemObservation, itemA, );
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label}>
                <Text variant="h5">{label}：</Text>
                {render.slice(0, 16)}
                <hr/>
                C3.6稳定性试验 》 (4)横向运行试验 》 空载，不倾翻。》 <Text css={{display: 'contents',fontSize:'1.1rem'}}>平台倾斜度要求值=</Text>
                <SuffixInput value={inp?.倾斜度要 || ''} style={{display: 'inline-flex', width: '8rem',alignItems: 'center'}}
                             onChange={e => setInp({...inp, 倾斜度要: e.currentTarget.value || undefined})}>%</SuffixInput>
                <hr/>
                {render.slice(16)}
                {mem && <>
                    <hr/>
                    备注：
                    <TextArea value={inp?.[mem] || ''} rows={5}
                              onChange={e => setInp({...inp, [mem]: e.currentTarget.value || undefined})}/>
                </>
                }
                {children}
            </InspectRecordLayout>
        );
});
export const Measure3Insulation =
    React.forwardRef((
        {
            children, show, alone = true, refWidth, label,
            config,iAname, allowableV = false, defaultSave = false, mem,
        }: MeasureCritMemProps, ref
    ) => {
        const {inp, setInp} = useItemInputControl({ref});
        const configToItem = React.useMemo(() => {
            return (typeof config === 'function' ? config(inp) : config);
            //不能加依赖项 inp  inp?.倾斜度要
        }, [config]);
        const newconfig = React.useMemo(() => {
            return (typeof config === 'function' ? config(inp) : config);
            //@这里  附加依赖项@  ‘蓄额压50’ ‘蓄额压1k’
        }, [inp?.蓄额压50, inp?.蓄额压1k, config]);
        const {itemObservation, itemObservationA,} = useMeasureItem(configToItem, allowableV);
        const {render} = useMeasureRow(inp, setInp, newconfig, allowableV, defaultSave);
        const itemA备注: string[] = mem ? [`${mem}`] : [];
        const itemA = React.useMemo(() => {
            return [...itemObservationA, ...itemA备注, ...iAname ?? []];
        }, [itemObservationA, iAname]);
        const [getInpFilter] = useMeasureInpFilter(itemObservation, itemA, );
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label}>
                <Text variant="h5">{label}：</Text>
                <Text css={{display: 'contents', fontSize: '1.1rem'}}>绝缘电阻：</Text>
                    C3.7(1)绝缘电阻》蓄电池绝缘电阻应当不小于50Ω乘蓄电池额定电压值, 即（
                    <Input value={inp?.蓄额压50 || ''} style={{display: 'inline-flex', width: '8rem', alignItems: 'center'}}
                                 onChange={e => setInp({...inp, 蓄额压50: e.currentTarget.value || undefined})}/>
                    ）MΩ；
                <hr/>
                {render.slice(0,2)}
                <hr/>
                <Text css={{display: 'contents', fontSize: '1.1rem'}}>绝缘电阻：</Text>
                C3.7(1)》其余电气设备的绝缘电阻应当不小于1kΩ乘蓄电池额定电压值，即（
                <Input value={inp?.蓄额压1k || ''} style={{display: 'inline-flex', width: '8rem', alignItems: 'center'}}
                       onChange={e => setInp({...inp, 蓄额压1k: e.currentTarget.value || undefined})}/>
                ）MΩ；
                <hr/>
                {render.slice(2)}
                {mem && <>
                    <hr/>
                    备注：
                    <TextArea value={inp?.[mem] || ''} rows={5}
                              onChange={e => setInp({...inp, [mem]: e.currentTarget.value || undefined})}/>
                </>
                }
                {children}
            </InspectRecordLayout>
        );
});


const resultLst=['该样机经过型式试验，各项结果符合规定，综合判定型式试验合格。'];
const structLst=['样机为蓄电池平衡重式叉车，CPD型，额定起重量为 5000kg。动力方式为电动、采用交流电动机驱动行走，传动方式为机械传动，车架结构为四支点整体车架结构，安装有护顶架，驾驶方式为坐驾。液压多路阀控制货叉升降、倾斜且速度可控，二级门架，双油缸驱动升降。'];
export const itemA结论 = ['接受日','检验结论','检验日期','检验日期1','主结构式','结论备注'];
//下结论页面：
export const ItemConclusion =
    React.forwardRef((
        {children, show, alone = true, refWidth,label,}: InternalItemProps, ref
    ) => {
        const [getInpFilter] = useMeasureInpFilter(null, itemA结论,);
        const {inp, setInp} = useItemInputControl({ref});
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label!}>
                <Text variant="h5">
                    {label} (报告下结论)：
                </Text>
                <InputLine  label='样机接受日期' >
                    <Input  value={inp?.接受日 ||''}  type='date'
                            onChange={e => setInp({ ...inp, 接受日: e.currentTarget.value}) } />
                </InputLine>
                <Text variant="h5">10 结论:</Text>
                <BlobInputList value={inp?.检验结论 || ''} rows={4} datalist={resultLst}
                               onListChange={v => setInp({ ...inp, 检验结论 :v || undefined}) } />
                <InputLine label='设置试验日期'>
                    <Input value={inp?.检验日期 || ''} type='date'
                           onChange={e => setInp({...inp, 检验日期: e.currentTarget.value})}/>
                </InputLine>
                <InputLine  label='试验起始日期' >
                    <Input  value={inp?.检验日期1 ||''}  type='date'
                            onChange={e => setInp({ ...inp, 检验日期1: e.currentTarget.value}) } />
                </InputLine>
                <Text variant="h5">11 主要结构型式:</Text>
                <BlobInputList value={inp?.主结构式 || ''} rows={4} datalist={structLst}
                               onListChange={v => setInp({ ...inp, 主结构式 :v || undefined}) } />
                <Text variant="h5">12 备注:</Text>
                <TextArea value={inp?.结论备注 || ''} rows={4}
                          onChange={e => setInp({...inp, 结论备注: e.currentTarget.value || undefined})}/>
        </InspectRecordLayout>
    );
});
